<template>
	<view class="page">
		<!-- 状态统计 -->
		<view class="stats-header">
			<view class="stats-item">
				<text class="stats-number">{{ createdActivities.length }}</text>
				<text class="stats-label">创建的活动</text>
			</view>
			<view class="stats-divider"></view>
			<view class="stats-item">
				<text class="stats-number">{{ joinedActivities.length }}</text>
				<text class="stats-label">参与的活动</text>
			</view>
		</view>

		<!-- 分类切换 -->
		<view class="category-tabs">
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'created' }" 
				@click="switchTab('created')"
			>
				<text class="tab-text">我创建的</text>
			</view>
			<view 
				class="tab-item" 
				:class="{ active: activeTab === 'joined' }" 
				@click="switchTab('joined')"
			>
				<text class="tab-text">我参与的</text>
			</view>
		</view>

		<!-- 创建的活动列表 -->
		<view v-if="activeTab === 'created'" class="content">
			<view 
				class="activity-card"
				v-for="activity in createdActivities"
				:key="activity.id"
				@click="manageActivity(activity)"
			>
				<image :src="activity.image" class="activity-image" />
				<view class="activity-info">
					<text class="activity-title">{{ activity.title }}</text>
					<text class="activity-desc">{{ activity.description }}</text>
					<view class="activity-stats">
						<text class="stat-item">👥 {{ activity.participants }}人参与</text>
						<text class="stat-item">📅 {{ activity.date }}</text>
					</view>
					<view class="activity-status">
						<text class="status-badge" :class="activity.status">
							{{ getStatusText(activity.status) }}
						</text>
					</view>
				</view>
				<view class="activity-actions">
					<image src="/static/svg/more.svg" class="more-icon" />
				</view>
			</view>
		</view>

		<!-- 参与的活动列表 -->
		<view v-if="activeTab === 'joined'" class="content">
			<view 
				class="activity-card"
				v-for="activity in joinedActivities"
				:key="activity.id"
				@click="viewActivity(activity)"
			>
				<image :src="activity.image" class="activity-image" />
				<view class="activity-info">
					<text class="activity-title">{{ activity.title }}</text>
					<text class="activity-organizer">主办：{{ activity.organizer }}</text>
					<view class="activity-stats">
						<text class="stat-item">📍 {{ activity.location }}</text>
						<text class="stat-item">📅 {{ activity.date }}</text>
					</view>
					<view class="join-status">
						<text class="join-badge" :class="activity.joinStatus">
							{{ getJoinStatusText(activity.joinStatus) }}
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view v-if="isEmpty" class="empty-state">
			<image src="/static/svg/walking.svg" class="empty-icon" />
			<text class="empty-text">{{ emptyText }}</text>
			<text class="empty-hint">{{ emptyHint }}</text>
			<view class="empty-action" v-if="activeTab === 'created'">
				<text class="create-btn" @click="createActivity">创建活动</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';

const activeTab = ref('created');

// 我创建的活动
const createdActivities = ref([
	{
		id: 1,
		title: '周末徒步登山活动',
		description: '一起去感受大自然的美好，放松身心',
		image: '/static/images/activity1.jpg',
		participants: 15,
		date: '2024-01-20',
		status: 'active' // active, completed, cancelled
	},
	{
		id: 2,
		title: '咖啡品鉴会',
		description: '学习咖啡文化，品味不同产区的咖啡豆',
		image: '/static/images/activity2.jpg',
		participants: 8,
		date: '2024-01-22',
		status: 'completed'
	}
]);

// 我参与的活动
const joinedActivities = ref([
	{
		id: 3,
		title: '读书分享会',
		organizer: '小李同学',
		image: '/static/images/activity3.jpg',
		location: '咖啡厅',
		date: '2024-01-25',
		joinStatus: 'confirmed' // confirmed, pending, cancelled
	}
]);

const isEmpty = computed(() => {
	if (activeTab.value === 'created') {
		return createdActivities.value.length === 0;
	}
	return joinedActivities.value.length === 0;
});

const emptyText = computed(() => {
	return activeTab.value === 'created' ? '还没有创建活动' : '还没有参与活动';
});

const emptyHint = computed(() => {
	return activeTab.value === 'created' ? '快来创建你的第一个活动吧～' : '快去发现有趣的活动吧～';
});

// 切换标签
const switchTab = (tab) => {
	activeTab.value = tab;
};

// 获取状态文本
const getStatusText = (status) => {
	const statusMap = {
		active: '进行中',
		completed: '已结束',
		cancelled: '已取消'
	};
	return statusMap[status] || '未知';
};

// 获取参与状态文本
const getJoinStatusText = (status) => {
	const statusMap = {
		confirmed: '已参与',
		pending: '待确认',
		cancelled: '已取消'
	};
	return statusMap[status] || '未知';
};

// 管理活动
const manageActivity = (activity) => {
	uni.showActionSheet({
		itemList: ['查看详情', '编辑活动', '分享活动', '取消活动'],
		success: (res) => {
			const actions = ['查看详情', '编辑活动', '分享活动', '取消活动'];
			uni.showToast({
				title: `${actions[res.tapIndex]}功能开发中`,
				icon: 'none'
			});
		}
	});
};

// 查看活动
const viewActivity = (activity) => {
	uni.showToast({
		title: '查看活动详情功能开发中',
		icon: 'none'
	});
};

// 创建活动
const createActivity = () => {
	uni.showToast({
		title: '创建活动功能开发中',
		icon: 'none'
	});
};
</script>

<style scoped>
.page {
	min-height: 100vh;
	background: #f8f9fa;
}

/* 统计头部 */
.stats-header {
	background: white;
	padding: 20px;
	display: flex;
	margin-bottom: 10px;
}

.stats-item {
	flex: 1;
	text-align: center;
}

.stats-number {
	font-size: 24px;
	font-weight: bold;
	color: #667eea;
	display: block;
	margin-bottom: 5px;
}

.stats-label {
	font-size: 14px;
	color: #666;
	display: block;
}

.stats-divider {
	width: 1px;
	height: 40px;
	background: #f0f0f0;
	margin: auto 10px;
}

/* 分类标签 */
.category-tabs {
	background: white;
	display: flex;
	padding: 0 20px;
	border-bottom: 1px solid #f0f0f0;
}

.tab-item {
	flex: 1;
	text-align: center;
	padding: 15px 0;
	position: relative;
}

.tab-item.active {
	color: #667eea;
}

.tab-item.active::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 30px;
	height: 3px;
	background: #667eea;
	border-radius: 2px;
}

.tab-text {
	font-size: 16px;
	font-weight: 500;
}

/* 内容区域 */
.content {
	padding: 15px;
}

/* 活动卡片 */
.activity-card {
	background: white;
	border-radius: 12px;
	padding: 15px;
	margin-bottom: 15px;
	display: flex;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.activity-image {
	width: 80px;
	height: 80px;
	border-radius: 8px;
	margin-right: 15px;
}

.activity-info {
	flex: 1;
}

.activity-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	display: block;
	margin-bottom: 6px;
}

.activity-desc,
.activity-organizer {
	font-size: 14px;
	color: #666;
	display: block;
	margin-bottom: 8px;
}

.activity-stats {
	display: flex;
	gap: 15px;
	margin-bottom: 8px;
}

.stat-item {
	font-size: 12px;
	color: #999;
}

.activity-status,
.join-status {
	display: flex;
}

.status-badge,
.join-badge {
	font-size: 12px;
	padding: 3px 8px;
	border-radius: 10px;
	color: white;
}

.status-badge.active,
.join-badge.confirmed {
	background: #28a745;
}

.status-badge.completed,
.join-badge.pending {
	background: #6c757d;
}

.status-badge.cancelled,
.join-badge.cancelled {
	background: #dc3545;
}

.activity-actions {
	display: flex;
	align-items: center;
}

.more-icon {
	width: 20px;
	height: 20px;
	filter: opacity(0.5);
}

/* 空状态 */
.empty-state {
	text-align: center;
	padding: 80px 20px;
}

.empty-icon {
	width: 64px;
	height: 64px;
	opacity: 0.3;
	margin-bottom: 20px;
}

.empty-text {
	font-size: 16px;
	color: #666;
	display: block;
	margin-bottom: 8px;
}

.empty-hint {
	font-size: 14px;
	color: #999;
	display: block;
	margin-bottom: 30px;
}

.empty-action {
	display: flex;
	justify-content: center;
}

.create-btn {
	background: #667eea;
	color: white;
	padding: 12px 30px;
	border-radius: 25px;
	font-size: 16px;
}

.create-btn:active {
	background: #5a67d8;
}
</style> 